<template>
  <chart :auto-resize="true" :options="options"> </chart>
</template>

<script>
export default {
  data() {
    return {
      options: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "20",
          itemHeight: 6,
          itemWidth: 16,
          textStyle: {
            color: "#fff",
          },
          data: [
            {
              name: "实际需量",
              icon: "roundRect",
            },
            {
              name: "预测需量",
              icon: "roundRect",
            },
            {
              name: "中报需量",
              icon: "roundRect",
            },
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLabel: {
            //修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#48EAFF",
            },
          },

          data: [
            "1.01",
            "1.02",
            "1.03",
            "1.04",
            "1.05",
            "1.06",
            "1.07",
            "1.08",
            "1.09",
            "1.10",
            "1.11",
            "1.12",
            "1.13",
            "1.14",
            "1.15",
          ],
          axisLine: {
            //y轴
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitLine: {
            //网格线
            show: false,
          },
        },
        yAxis: {
          type: "value",
          scale: true,
          data: ["0.2", "0.4", "0.6", "0.8", "1"],
          axisLabel: {
            //修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#48EAFF",
            },
          },

          axisLine: {
            //y轴
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitLine: {
            //网格线
            show: false,
          },
          max: 1,
          interval: 0.2, //每次增加几个
        },
        series: [
          {
            name: "实际需量",
            type: "line",
            symbol: "none", //取消折点圆圈
            lineStyle: {
              color: "#C63DFF",
            },
            itemStyle: {
              normal: {
                color: "#C63DFF",
              },
            },
            data: [
              0.52,
              0.58,
              0.6,
              0.6,
              0.66,
              0.67,
              0.69,
              0.7,
              0.6,
              0.55,
              0.5,
              0.54,
              0.46,
              0.4,
              0.46,
            ],
          },
          {
            name: "预测需量",
            type: "line",
            symbol: "none", //取消折点圆圈
            lineStyle: {
              color: "#4FFFFC",
            },
            itemStyle: {
              normal: {
                color: "#4FFFFC",
              },
            },
            data: [
              0.3,
              0.34,
              0.5,
              0.6,
              0.8,
              0.7,
              0.6,
              0.66,
              0.6,
              0.56,
              0.54,
              0.5,
              0.45,
              0.3,
              0.19,
            ],
          },
          {
            name: "中报需量",

            type: "line",
            symbol: "none", //取消折点圆圈
            lineStyle: {
              color: "#F6FF66",
            },
            itemStyle: {
              normal: {
                color: "#F6FF66",
              },
            },
            data: [
              0.2,
              0.3,
              0.4,
              0.45,
              0.48,
              0.52,
              0.54,
              0.6,
              0.64,
              0.6,
              0.62,
              0.42,
              0.45,
              0.46,
              0.56,
            ],
          },
        ],
      },
    };
  },
};
</script>
